<template>
	<view class="sing_detail">
		<!-- 报名剩余时间 -->
		<view class="time_remaining" v-if="s > 0 && orderdetail.state == 1">剩余支付时间：{{ down_time }}</view>
		<!-- 赛事活动详情 -->
		<view class="orderdetail">
			<view class="orderdetail_info">
				<view class="title"><span>报名信息</span></view>
				<view class="user" @tap="tosinguppeople">
					{{ userinfo.name }}
					<text v-if="userinfolength > 1">({{ userinfolength }}人)</text>
					<i class="icon">&#xe637;</i>
				</view>
			</view>
			<view class="register_top">
				<view class="register_top_left">
					<image :src="clubInfo.Logo" mode="aspectFill"></image>
					<span>{{ clubInfo.Title }}</span>
				</view>
			</view>
			<!-- 订单组件 -->
			<order :orderinfo="orderinfo_a" @lookactive="lookactive"></order>
			<!-- 审核信息 -->
			<view class="audit" v-if="orderdetail.state == 2 || orderdetail.state == 3">
				<view class="audit_bg">
					<image :src="src" mode="widthFix"></image>
					<view class="audit_contant">
						<view class="audit_contant_left">
							<view class="top">{{ orderdetail.team_name }}</view>
							<view class="bot">报名人数{{ singuoPeopleNum }}人</view>
						</view>
						<view class="audit_contant_right">
							<view class="top" v-if="tick_check_flag">
								<text v-if="tick_check_flag == 1">部分验票</text>
								<text v-else-if="tick_check_flag == 2">全部验票</text>
							</view>
							<view :class="['bot', statuslist.state >= 2 ? 'bot_bot' : '']" v-if="orderdetail.total_price > 0">￥{{ orderdetail.total_price }}</view>
							<view :class="['bot', statuslist.state >= 2 ? 'bot_bot' : '']" v-else>免费</view>
						</view>
					</view>
					<view class="ticket_look" v-if="etickflag" @tap="toeticket">
						<image src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/othertwo/look_ticket01.png" mode=""></image>
					</view>
					<view v-else class="ticket_look"><image src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/othertwo/look_ticket02.png" mode=""></image></view>
				</view>
			</view>
			<!-- 订单未支付状态 显示需要支付的总金额 -->
			<view class="need_pay" v-if="orderdetail.state == 1">
				<view class="need_pay_l">总价</view>
				<view class="need_pay_r">￥{{ orderdetail.total_price }}</view>
			</view>
			<!-- 附加任务信息 -->
			<view class="otherservice" v-if="servicelist.length">
				<view class="title">附加服务</view>
				<view class="otherservice_contant">
					<view class="contant_contant" v-for="(item, index) in servicelist" :key="index">
						<view class="top">
							<view class="left">{{ item.ser_name }}</view>
							<view class="right">
								<view class="right_num">x{{ item.num }}</view>
								<view class="right_price">￥{{ item.ser_price }}</view>
							</view>
						</view>
						<view class="bot" @tap="showservice(index)">
							该服务包含:{{ item.service_content }}...
							<text>【查看更多+】</text>
						</view>
					</view>
				</view>
			</view>
			<view class="line" style="width: 100%;height: 10upx;background-color: #F2F2F2;"></view>
			<!-- 订单信息 -->
			<view class="add_service order_message">
				<view class="add_service_title">
					<view class="line"></view>
					<text>订单信息</text>
				</view>
				<view class="add_service_contant">订单编号：{{ orderdetail.out_trade_no }}</view>
				<view class="add_service_contant" v-if="orderdetail.order_no">交易单号：{{ orderdetail.order_no }}</view>
				<view class="add_service_contant">创建时间：{{ orderdetail.create_time }}</view>
				<view class="add_service_contant" v-if="orderdetail.state != 1">支付方式：微信</view>
				<view class="add_service_contant" v-if="orderdetail.update_time && orderdetail.state == 2">支付时间：{{ orderdetail.update_time }}</view>
				<view class="add_service_contant" v-if="orderdetail.total_price > 0 && orderdetail.state == 2">支付金额：￥{{ orderdetail.total_price }}</view>
				<view class="add_service_contant" v-if="orderdetail.total_price == 0">支付金额：免费</view>
			</view>
		</view>
		<!-- 投诉建议 -->
		<view class="suggest" @tap="toSuggest">
			  <image src="../../static/othertwo/suggest.png" mode=""></image><text>投诉</text>
		</view>
		<!-- 审核未通过的提示信息 -->
		<view class="auditor" v-if="orderdetail.verify == 2">提示：您的报名未通过，支付费用已原路返回</view>
		<view class="par_awy" v-if="orderdetail.state == 1 && s > 0">
			<image src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/other/wechat_pay.png" mode=""></image>
			微信支付
		</view>
		<!-- 待支付订单 付款按钮 -->
		<view class="pay_btn" v-if="orderdetail.state == 1 && s > 0">
			<view class="pay_btn_l">
				<text>合计金额：</text>
				<text>￥{{ orderdetail.total_price }}</text>
			</view>
			<view class="pay_btn_r" @tap="topay">立即支付</view>
		</view>
		<uni-popupt ref="chooseservice">
			<view class="show_ser_contant">
				<!-- 错误按钮 -->
				<view class="err" @tap="close_p"><i class="icon">&#xe66f;</i></view>
				<scroll-view v-if="service_index == key" scroll-y="true" v-for="(item, key) in servicelist" :key="key" class="scroll-Y">
					<view class="p_ser_title">{{ item.ser_name }}</view>
					<view class="p_ser_contant">
						该服务包含：
						<p v-html="item.detail"></p>
					</view>
				</scroll-view>
			</view>
		</uni-popupt>
		<!-- loading 遮罩层 -->
		<loading v-if="loadflag"></loading>
		<navigation></navigation>
	</view>
</template>

<script>
import order from '../../components/order/order.vue';
import uniPopupt from '@/components/uni-popupt/uni-popup.vue';
import loading from '@/components/loading/loading.vue';
import navigation from '@/components/navigation/navigation.vue';
export default {
	components: {
		order,
		uniPopupt,
		loading,
		navigation
	},
	data() {
		return {
			loadflag: true,
			orderid: '',
			orderinfo: {},
			orderinfo_a: {},
			servicelist: [],
			statuslist: {},
			orderdetail: {},
			userinfo: {},
			userinfolength: '',
			singuoPeopleNum: '',
			pay_end_time: '',
			nowTime: '',
			down_time: '',
			s: '', // 时间
			djs_flag: false,
			nowTime: '', // 当前时间的时间戳
			tick_check_flag: 0,
			service_index: 0,
			user_phone: {},
			src: '', // 显示状态图
			etickflag: false,
			club_id: '',
			clubInfo: {},
			order: {}
		};
	},
	mounted() {
		this.nowTime = new Date().getTime();
		this.getOrderdetail();
		this.getOrderUser();
		this.orderinfo_a = this.orderInfo;
		this.djs();
		this.getclubInfo();
	},
	onLoad(options) {
		this.orderid = options.id;
		this.order = options.active;
		this.orderInfo = JSON.parse(options.active);
		this.club_id = options.club_id;
	},

	methods: {
		// 投诉建议
		toSuggest() {
			uni.navigateTo({
				url:'/pageA/settings/complaint'
			})
		},
		// 查看赛事详情
		lookactive(key) {
			 // console.log (key);
			uni.navigateTo({
				url: '/pageA/competiondetail/competitiondetail?id=' + key
			});
		},
		// 去支付
		topay() {
			uni.navigateTo({
				url: '/pageC/singup/confirmpay?id=' + this.orderid + '&activename=' + this.orderInfo.name
			});
		},
		// 获取用户信息
		getuserinfo() {
			this.ajax('user/userInfo', {
				success: res => {
					//  // console.log (res)
					this.user_phone = res.msg;
				}
			});
		},
		getclubInfo() {
			this.ajax('club/clubInfo', {
				data: {
					id: this.club_id
				},
				success: res => {
					var that = this;
					if (res.msg.Cover == null) {
						res.msg.Cover = 'https://ykp-hz.oss-cn-hangzhou.aliyuncs.com/4e65404b-d6e7-4244-9917-1176f56f0b2c.png';
					} else if (res.msg.Cover) {
						res.msg.Cover = res.msg.Cover.replace('http:', 'https:');
					}
					if (res.msg.Logo) {
						res.msg.Logo = res.msg.Logo.replace('http:', 'https:');
					} else {
						res.msg.Logo = 'https://ykp-hz.oss-cn-hangzhou.aliyuncs.com/4e65404b-d6e7-4244-9917-1176f56f0b2c.png';
					}
					this.clubInfo = res.msg;
					var reg = RegExp('/?x-oss-process=image/');
					if (!reg.test(this.clubInfo.Logo)) {
						uni.getImageInfo({
							src: this.clubInfo.Logo,
							success: function(image) {
								if (image.width > image.height) {
									that.clubInfo.Logo = that.clubInfo.Logo + '?x-oss-process=image/rotate,0';
								}
							}
						});
					}
					this.loadflag = false;
				}
			});
		},
		// 计算倒计时事件
		downtime() {
			var that = this;
			this.nowTime = new Date().getTime();
			var d_time = parseInt((this.pay_end_time - this.nowTime) / 1000);
			this.s = d_time;
		},
		djs() {
			setInterval(() => {
				this.s--;
				var m = parseInt((this.s / 60) % 60);
				var s = parseInt(this.s % 60);
				// this.s = parseInt(d_time / 60);
				if (m < 10 && m >= 0) m = '0' + m;
				if (s < 10 && s >= 0) s = '0' + s;
				this.down_time = m + ':' + s;
				if (this.s <= 0) this.djs_flag = false;
				//  // console.log (this.orderdetail.state)
			}, 1000);
		},
		// 获取订单信息
		getOrderdetail() {
			this.ajax('order/orderDetail', {
				data: {
					id: this.orderid
				},
				success: res => {
					res.msg.create_time_sjc = new Date(res.msg.create_time).getTime();
					// 剩余支付时间
					this.pay_end_time = res.msg.create_time_sjc + 1800000;
					// 订单信息
					this.orderdetail = res.msg;
					if (this.orderdetail.verify == 0) {
						this.src = 'https://ykp-new.oss-cn-hangzhou.aliyuncs.com/newPicter/ss_state05.png';
						this.etickflag = false;
					} else if (this.orderdetail.verify == 2) {
						this.src = 'https://ykp-new.oss-cn-hangzhou.aliyuncs.com/newPicter/ss_state06.png';
						this.etickflag = false;
					} else {
						if (this.orderdetail.state == 2 && this.nowTime < this.orderInfo.start_time_c) {
							this.src = 'https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/mine/ss_state02.png';
							this.etickflag = true;
						} else if (this.orderdetail.state == 2 && this.orderInfo.start_time_c < this.nowTime && this.nowTime < this.orderInfo.end_time_c) {
							this.src = 'https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/othertwo/order_active_type.png';
							this.etickflag = true;
						} else if (this.orderdetail.state == 3) {
							this.src = 'https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/mine/ss_state04.png';
							this.etickflag = false;
						} else if (this.orderdetail.state == 2 && this.nowTime > this.orderInfo.end_time_c) {
							this.src = 'https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/mine/ss_state03.png';
							this.etickflag = false;
						} else {
						}
					}
					// 服务信息
					this.servicelist = res.msg.service;
					// 显示在当前页德的内容
					this.servicelist.forEach(e => {
						e.service_content = e.memo.slice(0, 30);
					});
					this.downtime();
				}
			});
		},
		// 获取订单报名人员信息
		getOrderUser() {
			var that = this;
			this.ajax('order/orderUser', {
				data: {
					order_id: this.orderid
				},
				success: res => {
					 // console.log (res);
					// check 验票
					var check = [];
					res.msg.forEach(e => {
						check = check.concat(e.checked);
					});
					if (check.indexOf(0) == -1) {
						this.tick_check_flag = 2;
					} else if (check.indexOf(1) == -1) {
						this.tick_check_flag = 0;
					} else {
						this.tick_check_flag = 1;
					}
					var info = res.msg[0].form;
					this.userinfolength = res.msg.length;
					that.singuoPeopleNum = res.msg.length;
					info.forEach(item => {
						if (item.name == '姓名') {
							that.userinfo.name = item.value;
						} else if (item.name == '联系方式') {
							that.userinfo.mobile = item.value;
						}
					});
				}
			});
		},
		// 查看服务弹窗
		showservice(key) {
			this.$refs.chooseservice.open();
			this.service_index = key;
		},
		close_p() {
			this.$refs.chooseservice.close();
		},
		tosubmit() {
			uni.navigateTo({
				url: '/pageC/mysingup/etaicket'
			});
		},
		tosinguppeople() {
			uni.navigateTo({
				url: '/pageA/order/singuppeople?id=' + this.orderid
			});
		},
		toeticket() {
			uni.navigateTo({
				url: '/pageC/mysingup/eticketgroup?id=' + this.orderid
			});
		}
	}
};
</script>

<style lang="less" scoped>
page {
	background-color: #ffffff;
}

.sing_detail {
	overflow: hidden;
}

.time_remaining {
	width: 100%;
	height: 58upx;
	background-color: #8838d2;
	font-size: 24upx;
	line-height: 58upx;
	color: #ffffff;
	text-align: center;
}

.orderdetail_info {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 82upx;
	border-bottom: 2upx solid #e1e1e1;
	padding: 0 30upx;
	box-sizing: border-box;
	background-color: #ffffff;

	span {
		color: #333333;
		font-size: 28upx;
		display: inline-block;
		height: 40upx;
	}

	.user {
		display: flex;
		align-items: center;
		height: 40upx;
		color: #333333;
		font-size: 28upx;
		line-height: 40upx;
		
		.icon {
			font-size: 28upx;
			line-height: 40upx;
			color: #999999;
		}
	}
}
.suggest {
	font-size: 28upx;
	line-height: 40upx;
	padding-right: 40upx;
	box-sizing: border-box;
	margin-top: 30upx;
	float: right;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	color: #999999;
	image {
		width: 36upx;
		height: 36upx;
		margin-right: 10upx;
	}
}
.register_top {
	padding: 0 30upx;
	height: 88upx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #ffffff;

	.register_top_left {
		display: flex;
		align-items: center;

		image {
			width: 62upx;
			height: 62upx;
			border-radius: 50%;
		}

		span {
			margin-left: 20upx;
			font-size: 28upx;
			color: #999999;
			line-height: 188upx;
		}
	}

	.register_top_right {
		span {
			color: #007aff;
			font-size: 32upx;
			line-height: 100upx;
		}
	}
}

.title {
	display: flex;
	align-items: center;
}

.order_price {
	width: 100%;
	height: 90upx;
	padding: 0 30upx;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #ffffff;
	margin-bottom: 10upx;

	.pri {
		font-size: 28upx;
		color: #8738d2;
	}
}

.price_item {
	font-size: 28upx;
	color: #333;
}

.btn {
	width: 100%;
	height: 100upx;
	background-color: #007aff;
	position: absolute;
	bottom: 0;
	color: #ffffff;
	text-align: center;
	line-height: 100upx;
}

.eticket {
	width: 100%;
	padding: 20upx;
	box-sizing: border-box;
	background-color: #ffffff;
	margin-bottom: 10upx;

	.eticket_content {
		width: 100%;
		height: 160upx;
		box-sizing: border-box;
		border: 2upx solid #333333;
		border-left: 4upx solid #007aff;
		padding: 20upx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.left {
			.left_t {
				display: flex;
				margin-bottom: 20upx;

				.title {
					font-size: 32upx;
					color: #000;
					font-weight: bold;
					line-height: 40upx;
					margin-right: 30upx;
				}

				.people_num {
					font-size: 28upx;
					color: #999;
					line-height: 40upx;
				}
			}

			.left_b {
				font-size: 32upx;
				color: #666666;
			}
		}
	}
}

// 附加服务
.pad {
	padding: 0 30upx;
	box-sizing: border-box;
}

.flex {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.addservice_service {
	margin-top: 50upx;
	width: 100%;
	height: 100upx;
	background-color: #ffffff;

	span {
		color: #8938d5;
		font-size: 30upx;
		font-weight: bold;
	}

	.left {
		image {
			width: 60upx;
			height: 60upx;
			border-radius: 50%;
			margin-right: 15upx;
		}
	}
}

.addservice_title {
	width: 100%;
	height: 80upx;
	color: #343434;
	font-size: 32upx;
	font-weight: bold;
	line-height: 80upx;
}

.addservice_contant {
	background-color: #ffffff;
	height: 90upx;

	.addservice_contant_l {
		font-size: 28upx;
		color: #333333;
	}

	.addservice_contant_r {
		font-size: 24upx;
		color: #8738d1;
	}
}

// 赛事活动状态
.audit {
	width: 100%;
	height: 210upx;
	background-color: #ffffff;

	.audit_bg {
		width: 732upx;
		margin: auto;
		position: relative;
		top: 10upx;

		image {
			width: 732upx;
			height: 192upx;
		}

		.audit_contant {
			position: absolute;
			top: 56upx;
			left: 48upx;
			width: 550upx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.audit_contant_left {
				.top {
					font-size: 28upx;
					color: #333333;
					font-weight: bold;
					margin-bottom: 10upx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box; //作为弹性伸缩盒子模型显示。
					-webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
					-webkit-line-clamp: 1; //显示的行
				}

				.bot {
					font-size: 24upx;
					color: #666;
				}
			}

			.audit_contant_right {
				.top {
					font-size: 24upx;
					color: #999;
					margin-bottom: 10upx;
				}

				.bot {
					font-size: 28upx;
					font-weight: bold;
					text-align: right;
					color: #8530e8;
				}

				.bot_bot {
					color: #999999;
				}
			}
		}

		.ticket_look {
			width: 22upx;
			height: 110upx;
			position: absolute;
			right: 50upx;
			top: 40upx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.ticket_look_look {
			color: #999999;
		}

		// 印章
		.seal {
			position: absolute;
			right: 0;
			top: -110upx;
			width: 194upx;
			height: 158upx;
			z-index: 99999;

			image {
				width: 194upx;
				height: 158upx;
			}
		}
	}
}

// 订单未付款的金额信息
.need_pay {
	width: 100%;
	padding: 0 30upx;
	box-sizing: border-box;
	height: 92upx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #ffffff;

	.need_pay_l {
		font-size: 28upx;
		color: #333333;
	}

	.need_pay_r {
		font-size: 28upx;
		color: #8838d2;
	}
}

.otherservice {
	width: 100%;
	background-color: #ffffff;

	.title {
		width: 100%;
		height: 70upx;
		font-size: 28upx;
		color: #666666;
		background-color: #f2f2f2;
		padding: 0 30upx;
		box-sizing: border-box;
		line-height: 70upx;
	}

	.otherservice_contant {
		width: 100%;
		padding: 0 30upx;
		box-sizing: border-box;

		.contant_contant {
			padding: 10upx 0;
			box-sizing: border-box;
			width: 100%;
			border-bottom: 2upx solid #e1e1e1;

			.top {
				width: 100%;
				height: 60upx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.left {
					font-size: 28upx;
					color: #333333;
					font-weight: bold;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box; //作为弹性伸缩盒子模型显示。
					-webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
					-webkit-line-clamp: 1; //显示的行
				}

				.right {
					display: flex;

					.right_num {
						font-size: 28upx;
						color: #999999;
						margin-right: 20upx;
						line-height: 40upx;
					}

					.right_price {
						text-align: right;
						width: 140upx;
						font-size: 28upx;
						color: #8530e8;
						font-weight: bold;
					}
				}
			}

			.bot {
				font-size: 24upx;
				line-height: 40upx;
				color: #999999;

				text {
					display: inline-block;
					line-height: 40upx;
					color: #8530e8;
				}
			}
		}

		.contant_contant:last-child {
			border-bottom: 0;
		}
	}
}

// 附加服务信息
.add_service {
	width: 100%;
	padding: 0 30upx;
	padding-bottom: 30upx;
	background-color: #ffffff;
	box-sizing: border-box;
	margin-bottom: 10upx;

	.add_service_title {
		width: 100%;
		height: 90upx;
		border-bottom: 2upx solid #e1e1e1;
		font-size: 28upx;
		color: #333333;
		box-sizing: border-box;
		display: flex;
		align-items: center;

		.line {
			width: 4upx;
			height: 28upx;
			background-color: #8837d2;
			margin-right: 10upx;
		}

		text {
			display: block;
			height: 40upx;
			font-weight: bold;
			line-height: 40upx;
		}
	}

	.add_service_contant {
		font-size: 24upx;
		color: #999;
		margin-top: 22upx;
	}
}
.auditor {
	width: 100%;
	height: 50upx;
	background-color: #fedd38;
	font-size: 24upx;
	color: #333;
	line-height: 50upx;
	padding: 0 30upx;
	box-sizing: border-box;
}
.show_ser_contant {
	width: 600upx;
	height: 700upx;
	background-color: #ffffff;
	border-radius: 30upx;
	position: relative;

	.err {
		position: absolute;
		right: -10upx;
		top: -10upx;
		width: 32upx;
		height: 32upx;
		border-radius: 50%;
		background-color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;

		.icon {
			font-size: 32upx;
			height: 32upx;
		}
	}

	.scroll-Y {
		width: 100%;
		height: 100%;
		padding: 30upx 40upx;
		box-sizing: border-box;

		.p_ser_title {
			font-size: 32upx;
			color: #000000;
			line-height: 60upx;
		}

		.p_ser_contant {
			margin-top: 20upx;
			font-size: 28upx;
			color: #999999;
			line-height: 40upx;
		}

		image {
			width: 100%;
			margin-top: 20upx;
			height: 300upx;
		}
	}
}

.par_awy {
	width: 100%;
	height: 90upx;
	background-color: #ffffff;
	padding: 0 30upx;
	box-sizing: border-box;
	font-size: 28upx;
	color: #333333;
	line-height: 90upx;
	display: flex;
	align-items: center;
	margin-bottom: 100upx;

	image {
		width: 36upx;
		height: 32upx;
		margin-right: 10upx;
	}
}

.pay_btn {
	width: 100%;
	height: 90upx;
	display: flex;
	position: fixed;
	bottom: 0;
	z-index: 1;

	.pay_btn_l {
		width: 430upx;
		height: 100%;
		border-top: 2upx solid #e1e1e1;
		box-sizing: border-box;
		padding-left: 30upx;
		background-color: #ffffff;

		text {
			display: inline-block;
			line-height: 88upx;
		}

		text:first-child {
			font-size: 24upx;
			color: #999999;
		}

		text:last-child {
			font-size: 28upx;
			color: #8838d2;
		}
	}

	.pay_btn_r {
		flex: 1;
		height: 100%;
		text-align: center;
		line-height: 90upx;
		color: #ffffff;
		background: linear-gradient(to right, #8838d2 0%, #bb78f9 100%);
	}
}
</style>
<style>
page {
	background-color: #f2f2f2;
}
</style>
